<template>
  myName : {{ myName }}
  <br />
  fullName : {{ fullName }}
  <br />
  fullNameA : {{ fullNameA }}
  <br />
  <button @click="btnClick">change myName</button>
  <button @click="btnClickA">change fullNameA</button>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const myName = ref('jd')
    const youName = ref('qq')
    // computed方法返回值为一个ref类型
    // 传递一个参数为get
    const fullName = computed(() => `${myName.value} 和 ${youName.value}`)
    // 传递一个对象为实现了set和get方法
    const fullNameA = computed({
      get() {
        return `${myName.value} 和 ${youName.value}`
      },
      set(newV) {
        youName.value += newV
      },
    })
    const btnClick = () => {
      myName.value += 'pp'
    }
    const btnClickA = () => {
      fullNameA.value = 'zz'
    }
    return {
      myName,
      fullName,
      fullNameA,
      btnClickA,
      btnClick,
    }
  },
}
</script>
<style scoped></style>
